<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<canvas width="500" height="550"></canvas>

		<div>
			<label>fen:</label><input type="text" name="fen" />
			<input type="button" value="submit" onclick="submit()" />
		</div>
		<button onclick="chess.back()">撤销</button>

		<select>

		</select>
		<button onclick="select_submit()">确定</button>
		<button onclick="last()">上一题</button>
		<button onclick="next()">下一题</button>
		<div>
			<a href="#">百变神妙象棋谱</a>
			<a href="#">百局象棋谱精编</a>
			<a href="#">残局攻杀</a>
			<a href="#">高级教程</a>
			<a href="#">好奇拟局</a>
			<a href="#">湖崖集</a>
			<a href="#">基本杀法</a>
			<a href="#">江湖八大排局</a>
			<a href="#">江湖百局秘谱</a>
			<a href="#">蕉窗逸品</a>
			<a href="#">俥傌专集</a>
			<a href="#">橘中秘残局谱</a>
			<a href="#">烂柯神机</a>
			<a href="#">烂柯真机</a>
			<a href="#">林幼如作品集</a>
			<a href="#">傌兵专集</a>
			<a href="#">梦入神机</a>
			<a href="#">泥马渡康王</a>
			<a href="#">砲卒专集</a>
			<a href="#">弃子十三刀</a>
			<a href="#">杀招大全</a>
			<a href="#">实用残局（一）</a>
			<a href="#">实用残局（二）</a>
			<a href="#">实用残局（三）</a>
			<a href="#">适情雅趣</a>
			<a href="#">四大名局</a>
			<a href="#">韬略元机</a>
			<a href="#">天天象棋楚汉争霸</a>
			<a href="#">天天象棋春秋五霸</a>
			<a href="#">天天象棋三国演义</a>
			<a href="#">天天象棋战国七雄</a>
			<a href="#">万宝全书</a>
			<a href="#">象局汇存</a>
			<a href="#">象局彚刊</a>
			<a href="#">象棋老谱</a>
			<a href="#">象棋路边摊</a>
			<a href="#">心赋残篇</a>
			<a href="#">弈海烟波</a>
			<a href="#">弈海征帆</a>
			<a href="#">隐秀斋象戏谱</a>
			<a href="#">渊深海阔</a>
			<a href="#">中局大全</a>
			<a href="#">中局妙手300局</a>
			<a href="#">竹香斋象戏谱</a>
		</div>

	</body>
</html>

<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="js/chess.js"></script>
<script type="text/javascript" src="js/exchange.js"></script>
<script type="text/javascript" src="js/logic.js"></script>

<script type="text/javascript">
	let chess = new Chess();
	chess.show();

	function submit() {
		chess.submit();
	}

	function load_manual(filename) {
		let xhr = new XMLHttpRequest();
		xhr.open("GET", filename, false);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				// console.log(xhr.responseText);
				let select = document.getElementsByTagName("select")[0];
				while(select.childElementCount>0){
					select.removeChild(select.children[0]);
				}
				let options = xhr.responseText.split("\n");
				for (let i = 0; i < options.length; i++) {
					let option = document.createElement("option");
					option.innerText = options[i].split(" ")[0];
					select.appendChild(option);
				}
			}
		};
		xhr.send();
	}

	function select_submit() {
		let select = document.getElementsByTagName("select")[0];
		let index = select.selectedIndex;
		let fen = select.children[index].value;
		document.getElementsByName("fen")[0].value = fen;
		submit();
	}
	
	let as=document.getElementsByTagName("a");
	for(let i=0;i<as.length;i++){
		as[i].onclick=function(){
			// console.log(this.innerText);
			let filename="doc/"+this.innerText+".txt";
			load_manual(filename);
			select_submit();
		};
	}

	window.onload = function() {
		load_manual("doc/基本杀法.txt");
	};
	
	function last(){
		let select = document.getElementsByTagName("select")[0];
		let index = select.selectedIndex;
		if(index==0){
			alert("已经是第一题");
			return;
		}
		select.selectedIndex=select.selectedIndex-1;
		select_submit();
	}
	
	function next(){
		let select = document.getElementsByTagName("select")[0];
		let index = select.selectedIndex;
		if(index==select.childElementCount-1){
			alert("已经是最后一题");
			return;
		}
		select.selectedIndex=select.selectedIndex+1;
		select_submit();
	}
</script>
